import { useDispatch, useSelector } from "react-redux";
import { addTodo, loadTodos, selectTodosList, TODOS_FEATURE_KEY } from "./store/todos";
import { useEffect } from "react";

const Todos = () => {
  const dispatch = useDispatch();
  // 从store中获取状态
  // const todos = useSelector(
  //   // state => state[TODOS_FEATURE_KEY]
  //   (state) => state[TODOS_FEATURE_KEY].entities
  // );

  const todos = useSelector(selectTodosList)
  useEffect(() => {
    dispatch(loadTodos("https://jsonplaceholder.typicode.com/todos"));
  }, []);
  return (
    <div style={{ textAlign: "left", marginLeft: "10px" }}>
      <button onClick={() => dispatch(addTodo({ title: "测试任务" }))}>
        添加任务
      </button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.title}</li>
        ))}
      </ul>
      {/* <ul>
        {Object.values(todos).map((todo, index) => (
          <li key={index}>{todo.title}</li>
        ))}
      </ul> */}
    </div>
  );
};

export default Todos;
